<template>
  <div class="message-list">
    <ol class="list-wrapper">
      <router-link
        :to="{ name: 'MessageDetail', query: { id: item.jbxxId } }"
        tag="li"
        class="item-box"
        v-for="(item, i) of topic.list"
        :key="i"
      >
        <div class="left">
          <div class="top">{{ item.subject }}</div>
          <div class="bottom">
            <p v-show="item.createTime">{{ item.createTime }}</p>
            <p v-show="item.ydl">{{ item.ydl }}阅读量</p>
          </div>
          <div class="bottom" v-show="item.hdlb">
            <p>类别：{{ item.hdlb }}</p>
          </div>
        </div>
        <div class="right" v-if="item.lpt">
          <img :src="item.lpt" alt="" />
        </div>
      </router-link>
    </ol>
  </div>
</template>

<script>
import {jbxx1QuerydataZymhlist} from '../assets/js/api';
export default {
  data() {
    return {
      topic: {
        list: []
      }
    };
  },
  mounted() {
    jbxx1QuerydataZymhlist().then((res) => {
      this.topic.list = res.data.map((o) => ({
        ...o[0],
        subject: o[0].title,
        day: o[0].fbsj,
        weekDay: '',
        time: '',
        name: o[0].zgr
      }));
    });
  }
};
</script>

<style lang="less" scoped>
.message-list {
  background: #f5f5f5;
  padding: 20px;
  .list-wrapper {
    .item-box {
      width: 704px;
      height: 210px;
      box-sizing: border-box;
      background: #ffffff;
      display: grid;
      padding: 28px;
      grid-template-columns: 1fr 200px;
      grid-column-gap: 20px;
      box-shadow: 3px 4px 9px 1px rgba(1, 88, 155, 0.05);
      border-radius: 8px;
      margin-bottom: 22px;
      .left {
        overflow: hidden;
        .top {
          font-size: 36px;
          color: #333333;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .bottom {
          margin-top: 15px;
          color: #888888;
          font-size: 28px;
          display: flex;
          p {
            margin-right: 14px;
          }
        }
        .bottom:nth-child(3) {
          margin-top: 10px;
        }
      }
      .right {
        img {
          width: 200px;
          height: 150px;
        }
      }
    }
  }
}
</style>
